<template>
  <div>
    <!-- 导航头1 -->
    <div>
      <br />
      <el-breadcrumb separator-class="el-icon-arrow-right" id="one">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>当前位置</el-breadcrumb-item>
        <el-breadcrumb-item>养老服务管理系统</el-breadcrumb-item>
        <el-breadcrumb-item>机构养老</el-breadcrumb-item>
        <el-breadcrumb-item>入住管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 导航头2 -->

    <div id="RZGLshang">
      <span style="display: block; font-size: 20px; font-weight: 700; padding-top: 10px; margin-left: 10px;">搜索条件</span>
      <!-- <div style="width: 100%; height: 4px; background-color: #E7EAEC; margin-top: 10px;"></div> -->
      <el-form :inline="true" :model="duotiaojian" class="demo-form-inline" style="margin-top: -10px;">
        <el-form-item label="机构名称:" id="RZGLshangc">
          <el-input v-model="duotiaojian.jigou_id" placeholder="" id="RZGLshanga"></el-input>
        </el-form-item>
        <el-form-item label="姓名:" id="RZGLshangc">
          <el-input v-model="duotiaojian.rzname" placeholder="" id="RZGLshanga"></el-input>
        </el-form-item>
        <el-form-item label="身份证" id="RZGLshangc">
          <el-input v-model="duotiaojian.shenfen" placeholder="" id="RZGLshanga"></el-input>
        </el-form-item>

        <el-form-item label="身体自理情况:" id="RZGLshangc">
          <el-select v-model="duotiaojian.shenti" clearable size="small" placeholder="-请选择-" style="width: 100px;">
            <el-option label="-请选择-" value=""></el-option>
            <el-option label="自理（完全自理）" value="自理（完全自理）"></el-option>
            <el-option label="介助（半自理）" value="介助（半自理）"></el-option>
            <el-option label="介护（完全不自理）" value="介护（完全不自理）"></el-option>
            <el-option label="自理（完全自理）" value="自理（完全自理）"></el-option>
            <el-option label="特困供养人员" value="特困供养人员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份类别:" id="RZGLshangc">
          <el-select v-model="duotiaojian.leibie" clearable size="small" placeholder="-请选择-" style="width: 100px;">
            <el-option label="-请选择-" value=""></el-option>
            <el-option label="城市特困人员（三无）" value="城市特困人员（三无）"></el-option>
            <el-option label="优抚老年人" value="优抚老年人"></el-option>
            <el-option label="低保老年人" value="优抚老年人"></el-option>
            <el-option label="计划生育特殊困难家庭老年人" value="计划生育特殊困难家庭老年人"></el-option>
            <el-option label="低收入老年人" value="低收入老年人"></el-option>
            <el-option label="农村特困人员（五保）" value="农村特困人员（五保）"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit" id="RZGLshangb">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

      <!-- 按钮 -->
    <div id="anniu">
      <el-button type="success" @click="dialog = true" plain>新增</el-button>
      <el-button type="primary" @click="chakan()" plain>查看</el-button>
      <el-button type="info" @click="xiugai()" plain>修改</el-button>
      <el-button type="warning" @click="shanchu()" plain>删除</el-button>
      <el-button type="danger" @click="zhuxiao()" plain>注销</el-button>
    </div>
     <!-- 按钮 -->
     
    <!-- 表格1 -->
    <div>


      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" id="eltable"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column label="序号" type="index" width="80"></el-table-column>
      
        <el-table-column prop="jigouId" label="机构名称" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rzname" label="姓名" width="150" show-overflow-tooltip></el-table-column>

        <el-table-column label="性别" width="100" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.sex == 0 ? '女' : '男' }}</template>

        </el-table-column>

        <el-table-column prop="shenfen" label="身份证" width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="shenti" label="身体自理情况" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="leibie" label="身份类别" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column label="是否注销" width="80">
          <template slot-scope="scope">{{ scope.row.isZhuxiao == 0 ? '否' : '是' }}</template>
        </el-table-column>
      </el-table>





    </div>
    <!-- 表格2 -->
    <div class="block" id="fenye">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="duotiaojian.currentpage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="duotiaojian.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  <!-- 新增 -->

<el-drawer
  title="新增入住人员"
  :before-close="handleClose"
  :visible.sync="dialog"
  :append-to-body="true"
  direction="ltr"
  custom-class="demo-drawer"
  ref="drawer"
  id="xinzengab"
  >
  <div class="demo-drawer__content" id="zou">
    <el-form :model="xinzeng" ref="cod" :rules="rules">
      <el-form-item label="机构名称" prop="jigouId" :label-width="formLabelWidth">
        <el-select v-model="xinzeng.jigouId" clearable placeholder="请选择">
                  <el-option v-for="item in xiala" :key="item.noid" :label="item.jigouName" :value="item.jigouName"></el-option>
                </el-select>
      </el-form-item>


              



      <el-form-item label="姓名"  prop="rzname" :label-width="formLabelWidth">
        <el-input v-model="xinzeng.rzname" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="sex"  :label-width="formLabelWidth">
        <el-radio v-model="xinzeng.sex" label="1">男</el-radio>
        <el-radio v-model="xinzeng.sex" label="2">女</el-radio>
      </el-form-item>

      <el-form-item label="身份证" prop="shenfen"  :label-width="formLabelWidth">
        <el-input v-model="xinzeng.shenfen" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="出生日期" prop="chusheng"  :label-width="formLabelWidth">
        <el-date-picker v-model="xinzeng.chusheng" align="right" type="date" 
                  placeholder="选择日期"
                  :picker-options="pickerOptions">
    </el-date-picker>
      </el-form-item>
      

      <el-form-item label="民族" prop="minzu"  :label-width="formLabelWidth">
        <el-select v-model="xinzeng.minzu" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="汉族" value="汉族"></el-option>
          <el-option label="满族" value="满族"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="政治面貌" prop="zhengzhi"  :label-width="formLabelWidth">
        <el-select v-model="xinzeng.zhengzhi" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="党员" value="党员"></el-option>
          <el-option label="团员" value="团员"></el-option>
          <el-option label="群众" value="群众"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="身份类别" prop="leibie"  :label-width="formLabelWidth">
        <el-select v-model="xinzeng.leibie" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="城市特困人员（三无）" value="城市特困人员（三无）"></el-option>
          <el-option label="优抚老年人" value="优抚老年人"></el-option>
          <el-option label="低保老年人" value="低保老年人"></el-option>
          <el-option label="计划生育特殊困难家庭老年人" value="计划生育特殊困难家庭老年人"></el-option>
          <el-option label="低收入老年人" value="低收入老年人"></el-option>
          <el-option label="低保老年人" value="低保老年人"></el-option>
          <el-option label="农村特困人员（五保）" value="农村特困人员（五保）"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="身体自理情况" prop="shenti"  :label-width="formLabelWidth">
        <el-select v-model="xinzeng.shenti" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="自理（完全自理）" value="自理（完全自理）"></el-option>
          <el-option label="介助（半自理）" value="介助（半自理）"></el-option>
          <el-option label="介护（完全不自理）" value="介护（完全不自理）"></el-option>
          <el-option label="特困供养人员" value="特困供养人员"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否残疾" prop="canji"  :label-width="formLabelWidth">
        <el-radio v-model="xinzeng.canji" label="1">是</el-radio>
        <el-radio v-model="xinzeng.canji" label="2">否</el-radio>
      </el-form-item>

      <el-form-item label="联系电话" prop="phone"  :label-width="formLabelWidth">
        <el-input v-model="xinzeng.phone" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="联系人姓名" prop="contactsName"  :label-width="formLabelWidth">
        <el-input v-model="xinzeng.contactsName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="联系人电话" prop="contactsPhone"  :label-width="formLabelWidth">
        <el-input v-model="xinzeng.contactsPhone" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="婚姻状况" prop="hunyin"  :label-width="formLabelWidth">
        <el-select v-model="xinzeng.hunyin" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="已婚" value="已婚"></el-option>
          <el-option label="未婚" value="未婚"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="住址:">
            <el-button type="success" @click="dialogTableVisible = true">选择</el-button>
  
            <el-dialog title="选择行政区划" :visible.sync="dialogTableVisible">
    
      <el-cascader
      v-model="zuihouzhi"
      :options="options" :show-all-levels="false"></el-cascader>
    
  </el-dialog>
          </el-form-item>


          <el-form-item label="照片" :label-width="formLabelWidth">
       
            <el-upload
          class="upload-demo"
          action="/chain-api/ruzhu/upload"
           multiple
          :limit="3"
          :on-success="gouziyi"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
          <div>头像:&nbsp;<img :src="tupianzancun"  style="width:210px; height:100px;"/></div>
</el-upload>


      </el-form-item>


    </el-form>
    <div class="demo-drawer__footer">
      <el-button @click="cancelForm">取 消</el-button>
      <el-button type="primary" @click="Add('cod')">确定</el-button>
    </div>
  </div>
</el-drawer>
<!-- 新增 -->

<!-- 修改 -->
<el-drawer
  title="修改入住人员数据"
  :before-close="handleClose"
  :visible.sync="beyige"
  :append-to-body="true"
  direction="ltr"
  custom-class="demo-drawer"
  ref="drawer"
  id="xinzengab"
  >
  <div class="demo-drawer__content" id="zou">
    <el-form :model="code">
      <el-form-item label="机构名称" :label-width="formLabelWidth">
        <el-input v-model="code.jigouId" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="code.rzname" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio-group v-model="code.sex" size="small">
          <el-radio label="1" border>男</el-radio>
          <el-radio label="2" border>女</el-radio>
        </el-radio-group>
      </el-form-item> -->

      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio v-model="code.sex" :label="1">男</el-radio>
        <el-radio v-model="code.sex" :label="0">女</el-radio>
      </el-form-item>

      <el-form-item label="身份证" :label-width="formLabelWidth">
        <el-input v-model="code.shenfen" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="出生日期" :label-width="formLabelWidth">
        <el-date-picker v-model="code.chusheng" align="right" type="date" 
                  placeholder="选择日期"
                  :picker-options="pickerOptions">
    </el-date-picker>
      </el-form-item>
      

      <el-form-item label="民族" :label-width="formLabelWidth">
        <el-select v-model="code.minzu" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="汉族" value="汉族"></el-option>
          <el-option label="满族" value="满族"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="政治面貌" :label-width="formLabelWidth">
        <el-select v-model="code.zhengzhi" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="党员" value="党员"></el-option>
          <el-option label="团员" value="团员"></el-option>
          <el-option label="群众" value="群众"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="身份类别" :label-width="formLabelWidth">
        <el-select v-model="code.leibie" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="城市特困人员（三无）" value="城市特困人员（三无）"></el-option>
          <el-option label="优抚老年人" value="优抚老年人"></el-option>
          <el-option label="低保老年人" value="低保老年人"></el-option>
          <el-option label="计划生育特殊困难家庭老年人" value="计划生育特殊困难家庭老年人"></el-option>
          <el-option label="低收入老年人" value="低收入老年人"></el-option>
          <el-option label="低保老年人" value="低保老年人"></el-option>
          <el-option label="农村特困人员（五保）" value="农村特困人员（五保）"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="身体自理情况" :label-width="formLabelWidth">
        <el-select v-model="code.shenti" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="自理（完全自理）" value="自理（完全自理）"></el-option>
          <el-option label="介助（半自理）" value="介助（半自理）"></el-option>
          <el-option label="介护（完全不自理）" value="介护（完全不自理）"></el-option>
          <el-option label="特困供养人员" value="特困供养人员"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否残疾" :label-width="formLabelWidth">
        <el-radio v-model="code.canji" :label="1">是</el-radio>
        <el-radio v-model="code.canji" :label="2">否</el-radio>
      </el-form-item>

      <el-form-item label="联系电话" :label-width="formLabelWidth">
        <el-input v-model="code.phone" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="联系人姓名" :label-width="formLabelWidth">
        <el-input v-model="code.contactsName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="联系人电话" :label-width="formLabelWidth">
        <el-input v-model="code.contactsPhone" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="婚姻状况" :label-width="formLabelWidth">
        <el-select v-model="code.hunyin" placeholder="请选择活动区域">
          <el-option label="-请选择-" value=""></el-option>
          <el-option label="已婚" value="已婚"></el-option>
          <el-option label="未婚" value="未婚"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="住址:">
            <el-button type="success" @click="dialogTableVisible = true">选择</el-button>
  
            <el-dialog title="选择行政区划" :visible.sync="dialogTableVisible">
    
      <el-cascader
      v-model="zuihouzhi"
      :options="options" :show-all-levels="false"></el-cascader>
    
  </el-dialog>
          </el-form-item>


          <el-form-item label="照片" :label-width="formLabelWidth">
       
            <el-upload
          class="upload-demo"
          action="/chain-api/ruzhu/upload"
           multiple
          :limit="3"
          :on-success="gouzi"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
          </el-upload>
          <div>头像:&nbsp;<img :src="code.shangchuan"  style="width:210px; height:100px;"/></div>
          <div>头像:&nbsp;<img :src="tupianzancun"  style="width:210px; height:100px;"/></div>


      </el-form-item>


    </el-form>
    <div class="demo-drawer__footer">
      <el-button @click="cancelForm">取 消</el-button>
      <el-button type="primary" @click="zhenxiugai()">确定</el-button>
    </div>
  </div>
</el-drawer>
<!-- 修改 -->





<!-- 查看 -->
<el-drawer
  title="查看当前选中数据"
  :visible.sync="tablee"
  :append-to-body="true"
  direction="rtl"
  size="50%">
<el-form>
  &nbsp;机构名称:&nbsp;<el-input disabled v-model="gridData.jigouId" style="width:150px;" size="small"></el-input>
  &nbsp;姓名:&nbsp;<el-input disabled v-model="gridData.rzname" style="width:150px;" size="small"></el-input>
  &nbsp;性别:&nbsp;<el-input disabled v-model="gridData.sex" style="width:150px;" size="small"></el-input>
  <br/>
  <br/>
  &nbsp;身份证:&nbsp;<el-input disabled v-model="gridData.shenfen" style="width:150px;" size="small"></el-input>
  &nbsp;出生日期:&nbsp;<el-input disabled v-model="gridData.chusheng" style="width:150px;" size="small"></el-input>
  &nbsp;民族:&nbsp;<el-input disabled v-model="gridData.minzu" style="width:150px;" size="small"></el-input>
  <br/>
  <br/>
  &nbsp;政治面貌:&nbsp;<el-input disabled v-model="gridData.zhengzhi" style="width:150px;" size="small"></el-input>
  &nbsp;身份类别:&nbsp;<el-input disabled v-model="gridData.leibie" style="width:190px;" size="small"></el-input>
  
  <br/>
  <br/>
  &nbsp;住址:&nbsp;<el-input disabled v-model="gridData.zhuzhi" style="width:150px;" size="small"></el-input>
  &nbsp;是否残疾:&nbsp;<el-input disabled v-model="gridData.canji" style="width:150px;" size="small"></el-input>
  &nbsp;联系电话:&nbsp;<el-input disabled v-model="gridData.phone" style="width:150px;" size="small"></el-input>
  <br/>
  <br/>
  &nbsp;联系人姓名:&nbsp;<el-input disabled v-model="gridData.contactsName" style="width:150px;" size="small"></el-input>
  &nbsp;联系人电话:&nbsp;<el-input disabled v-model="gridData.canji" style="width:150px;" size="small"></el-input>
  <br/>
  <br/>
  &nbsp;身体自理情况:&nbsp;<el-input disabled v-model="gridData.shenti" style="width:150px;" size="small"></el-input>
  <br/>
  <br/>

  <div>头像:&nbsp;<img :src="gridData.shangchuan"  style="width:210px; height:100px;"/></div>
  
  <br/>
  <br/>
  &nbsp;婚姻状态:&nbsp;<el-input disabled v-model="gridData.phone" style="width:150px;" size="small"></el-input>
 
</el-form>

  

   <!-- <el-table :data="gridData">
      <el-table-column prop="jigouId" label="机构名称" width="150"></el-table-column>
      <el-table-column prop="rzname" label="姓名" width="200"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="shenfen" label="身份证" width="150"></el-table-column>
      <el-table-column prop="chusheng" label="出生日期" width="200"></el-table-column>
      <el-table-column prop="minzu" label="民族"></el-table-column>
      <el-table-column prop="zhengzhi" label="政治面貌" width="150"></el-table-column>
      <el-table-column prop="leibie" label="身份类别" width="200"></el-table-column>
      <el-table-column prop="shenti" label="身体自理情况"></el-table-column>
      <el-table-column prop="shangchuan" label="头像" width="150"></el-table-column>
      <el-table-column prop="canji" label="是否残疾" width="200"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>

      <el-table-column prop="contactsName" label="联系人姓名" width="150"></el-table-column>
      <el-table-column prop="contactsPhone" label="联系人电话" width="200"></el-table-column>
      <el-table-column prop="hunyin" label="婚姻状况"></el-table-column>
      <el-table-column prop="zhuzhi" label="住址"></el-table-column>
       

   </el-table> -->

</el-drawer> 
<!-- 查看 -->

<el-dialog title="注销原因" :visible.sync="dialogFormVisible">
  <el-form :model="zhuxiaole">
    <el-form-item label="注销时间" :label-width="formLabelWidth">
      <el-date-picker
      v-model="zhuxiaole.zhuxiaoTime"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
    </el-form-item>
    
    <el-form-item label="注销原因" :label-width="formLabelWidth">
      <el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="zhuxiaole.yuanyin">
</el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="zhuxiaoqueding()">确 定</el-button>
  </div>
</el-dialog>

  </div>





</template>


  
<script>
import axios from 'axios';
export default {
  data() {
    return {
     
      zhuxiaole:{zhuxiaoTime:'',yuanyin:'',isDelete:'1',noid:''},
      beyige:false,
      gridData:{
         jigouId:'',
        rzname:'',
        sex:'',
        shenfen:'',
        chusheng:'',
        minzu:'',
        zhengzhi:'',
        leibie:'',
        shenti:'',

        shangchuan:'',
        canji:'',
        phone:'',
        contactsName:'',
        contactsPhone:'',
        hunyin:'',
        zhuzhi:'',},
      tablee: false,
      rules: {
        jigouId: [
            { required: true, message: '请输入机构名称', trigger: 'blur' } 
          ],
          rzname: [
            { required: true, message: '请输入姓名', trigger: 'blur' } 
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' } 
          ],
          shenfen: [
            { required: true, message: '请输入身份证号', trigger: 'blur' } 
          ],
          chusheng: [
            { required: true, message: '请选择出生日期', trigger: 'blur' } 
          ],
          minzu: [
            { required: true, message: '请选择民族', trigger: 'change' } 
          ],
          zhengzhi: [
            { required: true, message: '请选择政治面貌', trigger: 'change' } 
          ],
          leibie: [
            { required: true, message: '请选择身份类别', trigger: 'change' } 
          ],
          shenti: [
            { required: true, message: '请选择身体状况', trigger: 'change' } 
          ],
          canji: [
            { required: true, message: '请选择是否残疾', trigger: 'change' } 
          ],
          phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' } 
          ],
          contactsName: [
            { required: true, message: '请输入联系人姓名', trigger: 'blur' } 
          ],
          contactsPhone: [
            { required: true, message: '请输入联系人电话', trigger: 'blur' } 
          ],
          hunyin: [
            { required: true, message: '请选择婚姻状况', trigger: 'change' } 
          ],
         },
      code:{
        noid:'',
        jigouId:'',
        rzname:'',
        sex:'',
        shenfen:'',
        chusheng:'',
        minzu:'',
        zhengzhi:'',
        leibie:'',
        shenti:'',

        shangchuan:'',
        canji:'',
        phone:'',
        contactsName:'',
        contactsPhone:'',
        hunyin:'',
        zhuzhi:'',
      },
      xinzeng:{
        noid:'',
        jigouId:'',
        rzname:'',
        sex:'',
        shenfen:'',
        chusheng:'',
        minzu:'',
        zhengzhi:'',
        leibie:'',
        shenti:'',

        shangchuan:'',
        canji:'',
        phone:'',
        contactsName:'',
        contactsPhone:'',
        hunyin:'',
        zhuzhi:'',
      },
      zuihouzhi:[],
      dialogTableVisible: false,
      dialog: false,
      loading: false,
      zancun:[],
      options: [{
            value: '新疆维吾尔自治区',
            label: '新疆维吾尔自治区',
            children: [{
              value: '乌鲁木齐市',
              label: '乌鲁木齐市',
              children: [{
                value: '天山区',
                label: '天山区'
              }, {
                value: '达坂城区',
                label: '达坂城区'
              }, {
                value: '乌鲁木齐县',
                label: '乌鲁木齐县'
              }, {
                value: '新市区',
                label: '新市区'
              }, {
                value: '天山区',
                label: '天山区'
              }, {
                value: '米东区',
                label: '米东区'
              }]
            }, {
              value: '吐鲁番地区',
              label: '吐鲁番地区',
              children: [{
                value: '吐鲁番市',
                label: '吐鲁番市'
              }, {
                value: '鄯善县',
                label: '鄯善县'
              }, {
                value: '托克逊县',
                label: '托克逊县'
              }]
            },{
              value: '哈密地区',
              label: '哈密地区',
              children: [{
                value: '哈密市',
                label: '哈密市'
              }, {
                value: '巴里坤哈萨克自治区',
                label: '巴里坤哈萨克自治区'
              }, {
                value: '伊吾县',
                label: '伊吾县'
              }]
            },{
              value: '阿克苏地区',
              label: '阿克苏地区',
              children: [{
                value: '阿克苏市',
                label: '阿克苏市'
              }, {
                value: 'dingbudaohang',
                label: '温宿县'
              }, {
                value: '库车县',
                label: '库车县'
              }, {
                value: '沙雅县',
                label: '沙雅县'
              }]
            },{
              value: '克拉玛依市',
              label: '克拉玛依市',
              children: [{
                value: '独山子区',
                label: '独山子区'
              }, {
                value: '克拉玛依区',
                label: '克拉玛依区'
              }, {
                value: '白碱滩区',
                label: '白碱滩区'
              }, {
                value: '乌尔禾区',
                label: '乌尔禾区'
              }]
            },{
              value: '昌吉回族自治区',
              label: '昌吉回族自治区',
              children: [{
                value: '昌吉市',
                label: '昌吉市'
              }, {
                value: '阜康区',
                label: '阜康区'
              }, {
                value: '呼图壁县',
                label: '呼图壁县'
              }, {
                value: '玛纳斯县',
                label: '玛纳斯县'
              }, {
                value: '奇台县',
                label: '奇台县'
              }, {
                value: '吉木萨尔县',
                label: '吉木萨尔县'
              }, {
                value: '木垒哈萨克自治县',
                label: '木垒哈萨克自治县'
              }]
            }]
          }],
      formLabelWidth: '80px',
      timer: null,
      tableData: [{}],
      multipleSelection:[],
      duotiaojian:{
        jigou_id:'',
        rzname:'',
        shenfen:'',
        shenti:'',
        leibie:'',
        currentpage:1,
        pagesize:5
      },
      xiala:[{}],
      dialogFormVisible: false,
      total:0,
      tupianzancun:'',
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
    }
  },
  methods: {
    zhuxiaoqueding(){
      this.zhuxiaole.noid=this.multipleSelection[0].noid;
      axios.post("/chain-api/ruzhu/zhuxiao",this.zhuxiaole).then(res=>{
                if(res.data.message=='成功'){
                  alert("已注销");
                  this.dialogFormVisible=false;
                  this.chaxun();


                }else{
                  alert("注销功能后台有误");
                }
        })
    },
    zhuxiao(){

      if (this.multipleSelection[1]==null) {
            
            this.dialogFormVisible=true;
       
          }else{
            alert("不能选择一条以上数据");
          }
       
    },
      gouzi(response, file, fileList){
        alert(file.response);
        this.tupianzancun="http://169.254.191.102:8087/back/uploadFiles/"+file.response;
        this.code.shangchuan=file.response;
      },
      gouziyi(response, file, fileList){
        alert(file.response);
        this.tupianzancun="http://169.254.191.102:8087/back/uploadFiles/"+file.response;
        this.xinzeng.shangchuan=file.response;
      },
    
  
      handlePreview(file) {

        console.log(file);
      },


    xiugai(){
      if (this.multipleSelection[1]==null) {
            console.log("选中一条数据正在进入修改回显功能");
            let noid = this.multipleSelection[0].noid;
            axios.get("/chain-api/ruzhu/chakan/"+noid).then(res=>{
              if (res.data.message=='成功') {
                    console.log(res.data.data);
                  this.code=res.data.data;
                this.code.shangchuan="/chain-api/uploadFiles/"+this.code.shangchuan;
                this.beyige=true;
              }

            })
          }else{
            alert("不能选择一条以上数据");
          }
    },
    zhenxiugai(){
          axios.post("/chain-api/ruzhu/zhenxiugai",this.code).then(res=>{
            if(res.data.message=='成功'){
              alert("修改成功");
              this.beyige=false;
              this.chaxun();
            }else{
              alert("修改后台有误");
            }
          })
    },
    chaxun() {
      axios.post("/chain-api/ruzhu",this.duotiaojian).then(res=>{

        this.tableData = res.data.data.list;
        // this.tableData=this.tableData.sex==0?'女':'男';
        this.duotiaojian.currentpage = res.data.data.pageNum;
        this.duotiaojian.pagesize = res.data.data.pageSize;
        console.log(res.data.data);
        this.total = res.data.data.total;
      })
    },

    // 获取选中的数据
    handleSelectionChange(val) {
        this.multipleSelection = val;
        
        console.log(this.multipleSelection);
        
      },
      shanchu(){
        // console.log(this.zancun);
        let zhi =  this.multipleSelection.map(value => value.noid)
        axios.post("/chain-api/ruzhu/shanchu",zhi).then(res=>{
          if(res.data.message=='成功'){
            alert("删除成功");
            this.chaxun();
          }else{
            alert("后台有误");
          }
        })
      },
      chakan(){
          if (this.multipleSelection[1]==null) {
            console.log("mememememdadada!!!!!=="+this.multipleSelection[0].noid);
            alert("选择了一条数据");
            let noid = this.multipleSelection[0].noid;
            axios.get("/chain-api/ruzhu/chakan/"+noid).then(res=>{
              if (res.data.message=='成功') {

                  this.gridData=res.data.data;
                 this.gridData.sex=this.gridData.sex==0?'女':'男';
                 this.gridData.canji=this.gridData.canji==0?'否':'是';
                 this.gridData.isZhuxiao=this.gridData.isZhuxiao==0?'否':'是';
                this.gridData.shangchuan="/chain-api/uploadFiles/"+this.gridData.shangchuan;
                this.tablee=true;
              }

            })
          }else{
            alert("选择了不止一条数据");
          }
      },
      onSubmit(){
        this.chaxun();
      },
      handleSizeChange(val) {
        this.duotiaojian.pagesize=val;
        this.chaxun();
      },
      handleCurrentChange(val) {
        this.duotiaojian.currentpage=val;
        this.chaxun();
      },
      xialakuang(){
        axios.get("/chain-api/ruzhu/xialakuang").then(res=>{
          this.xiala=res.data.data;
        })
      },
      Add(cod){
        this.$refs[cod].validate((valid) => {
        if (valid) {
          alert("进入Add方法");
          this.xinzeng.zhuzhi=this.zuihouzhi[1];
          // console.log("王后台带的数据：-------"+this.code.chusheng);
          axios.post("/chain-api/ruzhu/zengjia",this.xinzeng).then(res=>{
            if(res.data.message=='成功'){
              alert("增加成功");
              this.dialog=false;
              this.chaxun();
            }else{
              alert("后台有误");
            }
          })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },


      handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {




              this.Add();





              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      this.beyige=false;
      clearTimeout(this.timer);
    }
    
  }
,
  mounted(){
    this.chaxun();
    
      this.xialakuang();
   
  }
}
</script>
  
<style>

#haodeba{
  width: 150px;
}
#one {
  width: 36%;
  background-color: rgb(11, 248, 236);
  position: absolute;
  left: 220px;
  top: 78px;
}
/* .v-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  background: #000;
} */

#headA {
  padding-top: 10px;
  padding-bottom: 10px;
}

#RZGLshang {
  width: 1260px;
  height: 110px;
  margin-left: 20px;
  margin-top: 20px;
  background-color: #2e4d37;
}

#XZGLxia {
  width: 1260px;
  height: 350px;
  margin-top: 25px;
  margin-left: 20px;
  background-color: #130101;
}

#RZGLshanga {
  width: 130px;
  height: 30px;
}

#RZGLshangb {
  /* width: 75px;
    height: 38px; */
  font-size: 14px;
  background-color: #18A689;
  margin-top: 27px;
  margin-left: 18px;
}

#RZGLshangc {
  margin-top: 25px;
  margin-left: 25px;
}

#RZGLshangd {
  width: 350px;
  height: 40px;
  /* float: left; */
  /* display: inline-block; */
  margin-top: -25px;
  margin-left: -84px;
}

#RZGLshange {
  display: inline;
  width: 400px;
  height: 40px;
}

#RZGLshangf {
  width: 270px;
  height: 40px;
  margin-top: -40px;
  margin-left: 325px;
  /* background-color: aqua; */
}

#RZGLshangi {
  width: 200px;
  height: 32px;
  margin-top: 0px;
  margin-left: 0px;
  /* background-color: red; */
}

#RZGLshangg {
  width: 280px;
  height: 40px;
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

#RZGLshangh {
  /* float: left; */
  width: 200px;
  height: 30px;
  margin-top: 0px;
  margin-left: -5px;
  padding-left: 10px;
  padding-right: 0px;
}

#RZGLshanghi {
  width: 300px;
  height: 90px;
  margin-top: -50px;
  margin-left: -85px;
  padding-left: 0px;
  padding-right: 0px;
}

#RZGLshanghj {
  width: 225px;
  height: 40px;
  margin-top: -15px;
  margin-left: 60px;
  padding-left: 0px;
  padding-right: 0px;
  /* background-color: #18A689; */
}

#RZGLshanghk {
  width: 150px;
  height: 30px;
  margin-left: 9px;
  padding-left: 10px;
}
#eltable{
  position: absolute;
  left: 237px;
  top: 286px;
}
#fenye{
position: absolute;
    left: 237px;
    top: 600px;
}
#anniu{
  position: absolute;
    left: 260px;
    top: 240px;
}
#xinzengab{
  height: 550px;
  overflow: auto;
  /* position:absolute;
  left: 30px; */
  
}
#zou{
  /* position:absolute;
  left: 30px; */
  margin: auto;
    width: 70%;
  
}
</style>